<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>大文件分片</title>
  <style></style>
  <!-- <script src="./md5.min.js"></script> -->
  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/spark-md5/3.0.2/spark-md5.js"></script> -->
  <script src="https://cdn.bootcdn.net/ajax/libs/spark-md5/3.0.2/spark-md5.min.js"></script>
</head>

<body>
  <input type="file" id="fileRef" />
  <script type="module" src="./main.js">
    // // 规定每次切片的文件大小
    // const CHUNK_SIZE = 1024 * 1024 * 5 // 5MBå
    // // 定义线程数量
    // const THREAD_COUNT = 4 // 4个线程
    // const createChunks = (fileValue, index, chunkSize) => {
    //   console.log(fileValue)
    //   return new Promise((resolve, reject) => {
    //     // 开始第几个*分片的大小
    //     const start = index * chunkSize
    //     //   结束时start + 分片的大小
    //     const end = start + chunkSize
    //     const fileReader = new FileReader()
    //     const spark = new SparkMD5();
    //     // 读取文件的分片 读取完成后触发onload事件
    //     fileReader.onload = e => {
    //       console.log(e)
    //       // const spark = Md5(e.target.result)
    //       spark.append(e.target.result);
    //       // const files = file.slice(start, end)
    //       resolve({
    //         start,
    //         end,
    //         index,
    //         hash: spark.end(),
    //         // files
    //       })
    //     }
    //     // 读取文件的分片
    //     fileReader.readAsArrayBuffer(fileValue.slice(start, end))
    //   })
    // }


    // const cutFile = async (file) => {
    //   return new Promise(async (resolve, reject) => {
    //     const result = []
    //     // 计算文件的切片数量
    //     const chunks = Math.ceil(file.size / CHUNK_SIZE)
    //     // 计算每一个线程需要处理的切片数量
    //     const workerChunkCount = Math.ceil(chunks / THREAD_COUNT)
    //     let finishCount = 0 // 完成的线程数量

    //     // 生成每一个切片, 分片是耗时的所以是异步操作
    //     // for (let i = 0; i < chunks; i++) {
    //     //   const chunk = await createChunks(file, i, CHUNK_SIZE)
    //     //   // 等待分片完成, 就可以拿到这一个分片的信息
    //     //   result.push(chunk)
    //     // }
    //     // return result
    //     // 创建新的线程
    //     for (let i = 0; i < THREAD_COUNT; i++) {
    //       const worker = new Worker('./worker.js', {
    //         type: 'module'
    //       })
    //       //   const worker = new Worker(worderPath)
    //       // 计算每个线程的开始索引和结束索引
    //       const startIndex = i * workerChunkCount
    //       let endIndex = startIndex + workerChunkCount
    //       // 防止最后一个线程结束索引大于文件的切片数量的总数量
    //       if (endIndex > chunks) {
    //         endIndex = chunks
    //       }
    //       worker.postMessage({
    //         file,
    //         CHUNK_SIZE,
    //         startIndex,
    //         endIndex
    //       })
    //       console.log(worker)

    //       worker.onmessage = (e) => {
    //         console.log(e)
    //         // 接收到 worker 线程返回的消息
    //         for (let i = startIndex; i < endIndex; i++) {
    //           result[i] = e.data[i - startIndex]
    //         }
    //         console.log(result)
    //         worker.terminate()
    //         finishCount++
    //         if (finishCount === THREAD_COUNT) {
    //           // 所有线程都完成了
    //           // 通知主线程
    //           console.log(result)
    //           resolve(result)
    //         }
    //       }
    //     }
    //   })
    // }

    // fileRef.onchange = async (e) => {
    //   console.time('cutFile')
    //   // 获取文件
    //   const file = e.target.files[0]
    //   console.log(file)
    //   // 将文件进行切片
    //   const chunks = await cutFile(file)
    //   console.timeEnd('cutFile')
    //   console.log(chunks)
    // };





  </script>
</body>

</html>